<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>导航栏测试</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="css/text.css">


<body>
    <div>
        <!-- 导航栏 -->
        <div class="header">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="navbar-header" id="navbar-header">
                    <img src="img/header.png">
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav" id="navbar-nav">
                        <div class="navbar-nav-div active-div">
                            <div class="nav-div ">
                                <span class="nav-span">首页</span>
                            </div>
                        </div>
                        <div class="navbar-nav-div">
                            <div class="nav-div">
                                <span>
                                    <span class="nav-span">业务图谱</span>
                                    <div class="drop-down">
                                        <div>
                                            <ul>
                                                <li>图谱可视化</li>
                                                <li>本体管理</li>
                                             <li>实体管理</li>
                                            </ul>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <div class="navbar-nav-div">
                            <div class="nav-div">
                                <span>
                                    <span class="nav-span">民政智库</span>
                                    <div class="drop-down">
                                        <div>
                                            <ul>
                                                <li>文件管理</li>
                                                <li>知识检索</li>
                                            </ul>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <div class="navbar-nav-div">
                            <div class="nav-div">
                                <span>
                                    <span class="nav-span">数据管理</span>
                                    <div class="drop-down">
                                        <div>
                                            <ul>
                                                <li>元数据管理</li>
                                                <li>主数据管理</li>
                                                <li>安全中心</li>
                                                <li>数据治理</li>
                                                <li>多维分析</li>
                                                <li>任务调度</li>
                                                <li>数据集成</li>
                                                <li>智能标注</li>
                                                <li>实时流分析</li>
                                            </ul>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <div class="navbar-nav-div">
                            <div class="nav-div">
                                <span>
                                    <span class="nav-span">数据超市</span>
                                    <div class="drop-down">
                                        <div>
                                            <ul>
                                                <li>应用市场</li>
                                                <li>API市场</li>
                                            </ul>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <div class="navbar-nav-div">
                            <div class="nav-div">
                                <span>
                                    <span class="nav-span">领导驾驶舱</span>
                                    <div class="drop-down">
                                        <div>
                                            <ul>
                                                <li>综合看板</li>
                                                <li>敏捷BI</li>
                                            </ul>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <div class="navbar-nav-div">
                            <div class="nav-div">
                                <span>
                                    <span class="nav-span">服务与支持</span>
                                </span>
                            </div>
                        </div>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" id="navbar-right">
                        <li>
                            <div>
                                <button class="dropbtn">欢迎您，user</button>
                            </div>
                        </li>
                        <li>
                            <a class="self-icon">
                                <span class="glyphicon glyphicon-bell"></span>
                            </a>
                        </li>
                        <li>
                            <a class="self-icon">
                                <span class="glyphicon glyphicon-cog"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="middle">
            <!-- 轮播图 -->
            <div class="middle-first">
                <div class="box" id="box">
                    <div class="inner" id="inner">
                        <!--轮播图-->
                        <ul class="innerUl" id="ulObj">
                            <li class="inner-li">
                                <a href="#"><img src="img/firstImg.jpg" alt=""></a>
                            </li>
                            <li class="inner-li">
                                <a href="#"><img src="img/secondImg.png" alt=""></a>
                            </li>
                        </ul>

                        <ol class="bar">

                        </ol>
                        <!--左右焦点-->
                        <div id="arr">
                            <span id="left">
                                    <</span>
                            <span id="right">
                                        >
                                    </span>
                        </div>

                    </div>
                </div>

                <div class="img-text">
                    <div class="self-div">
                        <div class="self-div-one">
                            <h5>演示租户</h5>
                            <h2>政务业务数据管理平台</h2>
                            <span><input placeholder="输入关键字搜索"></span>
                            <span><button>搜索</button></span>
                        </div>

                        <div class="self-div-two">
                            <ul>
                                <li class="self-li">
                                    <span>社会救助处</span>
                                    <img src="img/fire.png" class="fireImg">
                                </li>
                                <li class="self-li">
                                    <span>儿童福利处</span>
                                </li>
                                <li class="self-li">
                                    <span>社会组织管理局</span>
                                </li>
                                <li class="self-li">
                                    <span>社会事务处</span>
                                </li>
                                <li class="self-li">
                                    <span>规划财务处</span>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="out-transboxs">
                        <div class="transbox">
                            <span class="self-span">1076</span>
                            <h5 class="self-h5">收集知识、政策文件</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">1</span>
                            <h5 class="self-h5">开放API</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">1980</span>
                            <h5 class="self-h5">业务实体</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">2277</span>
                            <h5 class="self-h5">业务实体关系数</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">14</span>
                            <h5 class="self-h5">知识图谱</h5>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 词云 -->
            <div class="middle-second">
                <div class="wordCloud">
                    <img src="img/wordCloud.png" style="height: 410px;">
                </div>
                <div class="tabText">
                    <div class="yw-tab-tab">
                        <div class="yw-tab-line" id="yw-tab-line"></div>
                        <a class=" yw-tab-a " id="yw-tab-a">最新政策</a>
                        <a class="yw-tab-a " id="yw-tab-b">智库热榜</a>
                    </div>
                    <hr/>
                    <div>
                        <ul class="firstUl" id="firstUl">
                            <li>
                                <span>国常会：加强县城商业体系建设
                                        发展新型农村便利店... </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>省教育厅办公室关于公布2021年省级教师培训项目承...
                                         </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                        </ul>
                        <ul class="secondUl" id="secondUl">
                            <li>
                                <span>国常会：第二个</span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>省教育厅办公室关于公布2021年省级教师培训项目承...
                                         </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                            <li>
                                <span>国家医保局：建立健全医保门诊共济保障机制
                                        在国新...  </span>
                                <span>2021-04-28</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 平台能力 -->
            <div class="middle-third ">
                <div>
                    <h3 class="platform-h3"><strong>平台能力</strong></h3>
                    <hr class="self-h3" />
                </div>
                <div class="platform-div">
                    <ul>
                        <li>
                            <span class="know" id="know">知识中台能力</span>
                        </li>
                        <li>
                            <span class="manage" id="manage">数据治理能力</span>
                        </li>
                        <li>
                            <span class="apply" id="apply">数据应用能力</span>
                        </li>
                    </ul>
                </div>
                <div class="wrapper ">
                    <ul class="know-energy" id="know-energy">
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style ">
                                    <img src="img/u1.png ">
                                </div>
                                <div>
                                    <p class="li-p1 "><strong>图谱管理</strong></p>
                                    <p class="li-p2 ">通过图谱技术，融合海量多源异构知识，提供精准高效的检索、问答、推荐等一站式智能应用</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style "><img src="img/u2.png "></div>
                                <div>
                                    <p class="li-p1 "><strong>文档智能</strong></p>
                                    <p class="li-p2 ">能够与知识体系搭建系统实现数据共享，能够与知识库系统进行对接，实现数据自动载入标注平台</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style "><img src="img/u3.png "></div>
                                <div>
                                    <p class="li-p1 "><strong>收集器管理</strong></p>
                                    <p class="li-p2 ">能够实现结构化数据本体抽取、实体融合，构建结构化知识图谱融合。同时支持对数据源管理、数据加工等功能</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style "><img src="img/u4.png "></div>
                                <div>
                                    <p class="li-p1 "><strong>指标库</strong></p>
                                    <p class="li-p2 ">对平台的原生指标、派生指标、组合指标进行统一规范管理，在数据融通基础上提供指标模型，构建服务业务的指标支撑体系</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style "><img src="img/u5.png "></div>
                                <div>
                                    <p class="li-p1 "><strong>标签库</strong></p>
                                    <p class="li-p2 ">对全平台标签进行规范管理，可通过标签查询被标注主体的各类信息，通过标签对数据进行分类标注、特征描述</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="manage-energy" id="manage-energy">
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style ">
                                    <img src="img/u1.png " >
                                </div>
                                <div>
                                    <p class="li-p1 "><strong>主数据</strong></p>
                                    <p class="li-p2 ">满足跨部门业务协同需要的、反映核心业务实体状态属性的企业（组织机构）基础信息，部分主数据支持对外开放调用</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style "><img src="img/u1.png "  ></div>
                                <div>
                                    <p class="li-p1 "><strong>库表元数据管理</strong></p>
                                    <p class="li-p2 ">支持数据源元数据信息抽取，库表元数据管理，元数据本体映射，信息抽取，自定义SQL等功能</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="apply-energy" id="apply-energy">
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style ">
                                    <img src="img/u1.png "  >
                                </div>
                                <div>
                                    <p class="li-p1 "><strong>API市场</strong></p>
                                    <p class="li-p2 ">构建智能应用与服务，将传统政务信息、数据资源整合，打破程序壁垒、部门壁垒，实现数据共享</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style "><img src="img/u1.png "  ></div>
                                <div>
                                    <p class="li-p1 "><strong>应用市场</strong></p>
                                    <p class="li-p2 ">构建智能应用与服务，将传统政务信息、数据资源整合，打破程序壁垒、部门壁垒，实现数据共享</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="li-div ">
                                <div class="circle "></div>
                                <div class="icon-style "><img src="img/u1.png "  ></div>
                                <div>
                                    <p class="li-p1 "><strong>数据资源目录</strong></p>
                                    <p class="li-p2 ">为政务领域构建出统一、集成的、稳定的数据模型奠定基础,同时提供业务元数据数据共享交换</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 热门服务 -->
            <div class="middle-fourth ">
                <div>
                    <h3 class="service "><strong>热门服务</strong></h3>
                    <hr class="self-h3 " />
                </div>
                <div class="service-div ">
                    <ul>
                        <li class="li3 active-title" id="new" >
                            最新API
                        </li>
                        <li class="li3" id="hot">
                            热门API
                        </li>
                        <li class="li3" id="newApply">
                            最新应用
                        </li>
                        <li class="li3" id="hotApply">
                            热门应用
                        </li>
                    </ul>
                </div>
                <div style="width: 80%;min-width: 1200px;margin: auto;padding-bottom: 50px;">
                    <div class="service-div-two" id="newHandle">
                        <li>
                            <p>
                                <img src="img/u6.png " class="u6 ">
                                <span class="card-span1 ">卡片总数</span>
                            </p>
                            <p>
                                <span class="card-span2 ">卡片总数</span>
                            </p>
                            <p>
                                <span>2021-6-25 16:40:20</span>
                                <img src="img/order.svg " class="order" id="order">
                            </p>
                        </li>
                    </div>
                    <div class="service-div-two" id="hotHandle">

                    </div>
                    <div class="service-div-two" id="newApplyHandle">

                    </div>
                    <div class="service-div-two" id="hotApplyHandle">

                    </div>
                </div>
            </div>
        </div>

        <div class="footer ">
            <div class="footer-first ">
                <div>
                    <li class="contact ">
                        <h6>联系我们</h6>
                    </li>
                    <li class="phone ">
                        <span>致电：13812345678</span>
                    </li>
                    <li class="phone ">
                        <span>时间：9:00-18:00</span>
                    </li>
                </div>
                <div>
                    <li class="contact ">
                        <h6>声明</h6>
                    </li>
                    <li class="phone ">
                        <span class="footer-span ">用户服务声明</span>
                    </li>
                    <li class="phone ">
                        <span class="footer-span ">隐私政策服务</span>
                    </li>
                </div>
            </div>
            <div class="self-line "></div>
            <div>
                <p class="show ">演示租户</p>
                <p class="showinv "> 北京国双科技有限公司 | 京公安网备：贵 00001 </p>
            </div>
        </div>
    </div>

    <script>
        window.onload = function() {
            var imgWidth = document.getElementsByClassName("innerUl ")[0].firstElementChild.offsetWidth
            var screenWidth = window.screen.width;
            init();
            control(innerWidth);
        }
        init = function() {
            /**
             *
             * @param id  传入元素的id
             * @returns {HTMLElement | null}  返回标签对象，方便获取元素
             */
            function my$(id) {
                return document.getElementById(id);
            }

            //获取各元素，方便操作
            var box = my$("box");
            var inner = document.getElementById("inner");
            var ulObj = document.getElementById("ulObj");
            var list = ulObj.children;
            var imgWidth = document.getElementsByClassName("inner-li")[0].offsetWidth
            console.log(imgWidth)
            var olObj = inner.children[1];
            var arr = my$("arr");
            var right = my$("right");
            var pic = 0;
            

                //根据li个数，创建小按钮
            for (var i = 0; i < list.length; i++) {
                var liObj = document.createElement("li");

                olObj.appendChild(liObj);
                // liObj.innerText=(i+1);
                liObj.setAttribute("index", i);

                //为按钮注册mouseover事件
                liObj.onclick = function() {
                    //先清除所有按钮的样式
                    for (var j = 0; j < olObj.children.length; j++) {
                        olObj.children[j].removeAttribute("class");
                    }
                    this.className = "current";
                    pic = this.getAttribute("index");
                    ulObj.style.left = -pic * imgWidth + "px";
                }

            }


            //设置ol中第一个li有背景颜色
            olObj.children[0].className = "current";
            //克隆一个ul中第一个li,加入到ul中的最后=====克隆
            ulObj.appendChild(ulObj.children[0].cloneNode(true));

            var timeId = setInterval(onmouseclickHandle, 5000);
            //左右焦点实现点击切换图片功能
            box.onmouseover = function() {
                arr.style.display = "block";
                clearInterval(timeId);
            };
            box.onmouseout = function() {
                arr.style.display = "none";
                timeId = setInterval(onmouseclickHandle, 5000);
            };

            right.onclick = onmouseclickHandle;
            function onmouseclickHandle() {
                //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
                //所以,如果用户再次点击按钮,用户应该看到第二个图片
                if (pic == list.length - 1) {
                    //如何从第6个图,跳转到第一个图
                    pic = 0; //先设置pic=0
                    ulObj.style.left = 0 + "px"; //把ul的位置还原成开始的默认位置
                }
                pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了
                animate(ulObj, -pic * imgWidth,5); //pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
                //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
                if (pic == list.length - 1) {
                    //第五个按钮颜色干掉
                    olObj.children[olObj.children.length - 1].className = " ";
                    //第一个按钮颜色设置上
                    olObj.children[0].className = "current";
                } else {
                    //干掉所有的小按钮的背景颜色
                    for (var i = 0; i < olObj.children.length; i++) {
                        olObj.children[i].removeAttribute("class");
                    }
                    olObj.children[pic].className = "current";
                }
            }
            left.onclick = function() {
                if (pic == 0) {
                    pic = list.length - 1;
                    ulObj.style.left = -pic * imgWidth + "px";
                }
                pic--;
                animate(ulObj, -pic * imgWidth,5);
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                //当前的pic索引对应的按钮设置颜色
                olObj.children[pic].className = "current";
            };

            //设置任意的一个元素,移动到指定的目标位置
            function animate(element, target,time) {
                clearInterval(element.timeId);
                //定时器的id值存储到对象的一个属性中
                element.timeId = setInterval(function() {
                    //获取元素的当前的位置,数字类型
                    var current = element.offsetLeft;
                    //每次移动的距离
                    var step = 10;
                    //判断当前位置与想移到的位置 当前位置小于想移到的位置则+10 大于则-10
                    step = current < target ? step : -step;
                    //当前移动到位置
                    current += step;
                    if (Math.abs(current - target) > Math.abs(step)) {
                        element.style.left = current + "px";
                    } else {
                        //清理定时器
                        clearInterval(element.timeId);
                        //直接到达目标
                        element.style.left = target + "px";
                    }
                }, time);
            }
            
            var tabA = document.getElementById("yw-tab-a");
            var tabB = document.getElementById("yw-tab-b");
            var firstUl = document.getElementById("firstUl");
            var secondUl = document.getElementById("secondUl");
            var tabLine = document.getElementById("yw-tab-line");
            tabA.style.color = "#0073E8";

            //当点击智库热榜时候，div右移
            tabB.onclick =function(){
                tabA.style.color = "#333333";
                tabB.style.color = "#0073E8";
                secondUl.style.display="block";
                firstUl.style.display="none";
                if( window.screen.width == 1920){
                    animate(tabLine, 1145,20);
                }else{
                    animate(tabLine, 800,20);
                }
                
            }
            //当点击最新政策时候，div左移
            tabA.onclick =function(){
                tabA.style.color = "#0073E8";
                tabB.style.color = "#333333";
                secondUl.style.display="none";
                firstUl.style.display="block";
                if( window.screen.width == 1920){
                     animate(tabLine,1047,20);
                }else{
                    animate(tabLine,699.6,20);
                }
               
            }
        
            //点击数据治理能力
            var knowEnergy = document.getElementById("know-energy");
            var applyEnergy = document.getElementById("apply-energy");
            var manageEnergy = document.getElementById("manage-energy");
            var know = document.getElementById("know");
            var apply = document.getElementById("apply");
            var manage = document.getElementById("manage");

            manage.onclick=function(){
                manage.style.color="#1C4EFF";
                apply.style.color="#333333";
                know.style.color="#333333";
                knowEnergy.style.display="none";
                applyEnergy.style.display="none";
                manageEnergy.style.display="flex";
            }

            apply.onclick=function(){
                manage.style.color="#333333";
                apply.style.color="#1C4EFF";
                know.style.color="#333333";
                knowEnergy.style.display="none";
                applyEnergy.style.display="flex";
                manageEnergy.style.display="none";
            }

            know.onclick=function(){
                manage.style.color="#333333";
                apply.style.color="#333333";
                know.style.color="#1C4EFF";
                knowEnergy.style.display="flex";
                applyEnergy.style.display="none";
                manageEnergy.style.display="none"
            }
        
            //热门服务
            var new1 = document.getElementById("new");
            var hot = document.getElementById("hot");
            var newApply = document.getElementById("newApply");
            var hotApply = document.getElementById("hotApply");

            var newHandle = document.getElementById("newHandle");
            var hotHandle = document.getElementById("hotHandle");
            var newApplyHandle = document.getElementById("newApplyHandle");
            var hotApplyHandle = document.getElementById("hotApplyHandle");
            
            hotHandle.style.display="none";
            newApplyHandle.style.display="none";
            hotApplyHandle.style.display="none";

            new1.onclick=function(){
                hot.classList.remove("active-title");
                newApply.classList.remove("active-title");
                hotApply.classList.remove("active-title");
                new1.classList.add("active-title");
                newHandle.style.display="block";
                hotHandle.style.display="none";
                newApplyHandle.style.display="none";
                hotApplyHandle.style.display="none";
            }

            hot.onclick=function(){
                new1.classList.remove("active-title");
                newApply.classList.remove("active-title");
                hotApply.classList.remove("active-title");
                hot.classList.add("active-title");
                newHandle.style.display="none";
                hotHandle.style.display="block";
                newApplyHandle.style.display="none";
                hotApplyHandle.style.display="none";
            }
            newApply.onclick=function(){
                new1.classList.remove("active-title");
                hot.classList.remove("active-title");
                hotApply.classList.remove("active-title");
                newApply.classList.add("active-title");
                newHandle.style.display="none";
                hotHandle.style.display="none";
                newApplyHandle.style.display="block";
                hotApplyHandle.style.display="none";
            }
            hotApply.onclick=function(){
                new1.classList.remove("active-title");
                newApply.classList.remove("active-title");
                hot.classList.remove("active-title");
                hotApply.classList.add("active-title");
                newHandle.style.display="none";
                hotHandle.style.display="none";
                newApplyHandle.style.display="none";
                hotApplyHandle.style.display="block";
            }

            var order =document.getElementById("order");
            order.onclick=function(){
                if(order.src === "http://10.202.226.154:8080/frontend/img/order2.svg"){
                    order.src="img/order.svg"
                }else{
                    order.src="img/order2.svg"
                }
                
            }
        }
    
        control=function(innerWidth){
            //屏幕宽度
            var screenWidth = window.screen.width;
            console.log(innerWidth)
            //导航栏right的宽度
            var navbarRight = document.getElementById("navbar-right");
            console.log(navbarRight)
            var rightWidth = navbarRight.offsetWidth;
            //图片宽度
            var navbarHeader = document.getElementById("navbar-header")
            var navbarWidth = navbarHeader.offsetWidth;
            //可以放li的宽度
            console.log(innerWidth+"+"+navbarWidth+"+"+rightWidth)
            var liWidth = innerWidth-navbarWidth-rightWidth;
            console.log(liWidth)
            //可以放多少个li
            var num=Math.floor(liWidth/114)
            if(num<7){
                //如果num小于7个，说明需要折叠起来，折叠的数量为realNum
                var realNum=7-num;
                var navbarNav=document.getElementById("navbar-nav");
                var span=document.createElement("span");
                span.classList.add("navbar-nav-span");
                span.appendChild(document.createTextNode("..."));
                navbarNav.appendChild(span);
                //给span加div块 ul li
                var spanDiv = document.createElement("div");
                //给第一个div块加样式
                spanDiv.classList.add("span-div");
                span.appendChild(spanDiv);

                var spanUl = document.createElement("ul");
                spanUl.classList.add("span-ul");
                spanDiv.appendChild(spanUl);

                for (let i = 0; i < realNum; i++) {
                    var spanLi = document.createElement("li");
                    spanLi.classList.add("span-li");
                    spanUl.appendChild(spanLi);
                    spanLi.appendChild(navbarNav.children[num]);
                    
                    console.log(spanUl.children[i])
                }

                

            }
        }
    
        // window.addEventListener('resize', function () {
        //     console.log(outerWidth);
        //     console.log(innerWidth);
        //     var proportion = Math.round(outerWidth / innerWidth).toFixed(3)
        //     console.log('当前页面缩放比例应该是：' + Math.round(1000 * (outerWidth / innerWidth)) );
        //     control(innerWidth);
        // });

    </script>
</body>
<style>
    .yw-tab-a {
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
        display: inline;
        padding-bottom: 10px;
        text-decoration: none!important;
        color: #333333;
    }
    
    .yw-tab-a:hover {
        color: #0073E8;
        cursor: pointer;
    }
    
    .yw-tab-line {
        width: 108px;
        height: 2px;
        background-color: #0073E8;
        position: absolute;
        margin-top: 35px;
    }

</style>

</html>